<template>
	<zui-box>
		<zui-navbar title="修改支付密码"></zui-navbar>
		<u-gap height="60rpx"></u-gap>
		<view class="zui-form">
			<view class="zui_input">
				<u-input v-model="sms_code" shape="circle" placeholder="短信验证码" border="none" color="#999" clearable>
					<template slot="suffix">
						<zui-code type="2" :mobile="account" scene="reset_trade"></zui-code>
					</template>
				</u-input>
			</view>
			<view class="zui_input"><u-input v-model="password" maxlength="6" type="password" shape="circle" placeholder="请输入支付密码" border="none" clearable color="#999"></u-input></view>
			<view class="zui_input">
				<u-input v-model="confirm_password" type="password" maxlength="6" shape="circle" placeholder="请输入确认支付密码" border="none" clearable color="#999"></u-input>
			</view>
		</view>
		<u-gap height="250rpx"></u-gap>
		<zui-button bgColor="#AA334F" @fun="save">保存</zui-button>
	</zui-box>
</template>

<script>
export default {
	data() {
		return {
			account: '',
			sms_code: '',
			password: '',
			confirm_password: ''
		};
	},
	onShow() {
		this.getuser();
	},
	methods: {
		getuser() {
			uni.showLoading({
				title: '加载中...'
			});
			uni.$u.http
				.get('/app/user/getUserInfo', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					uni.hideLoading();
					this.account = res.mobile;
				})
				.catch(err => {
					uni.hideLoading();
				});
		},
		save() {
			if (!this.sms_code) return this.say('请输入短信验证码');
			if (!this.password) return this.say('请输入支付密码');
			if (!this.confirm_password) return this.say('请输入确认支付密码');
			if (this.password != this.confirm_password) {
				return this.say('两次支付密码输入不一样');
			}
			uni.$u.http
				.post(
					'/app/user/updateTradePassword',
					{
						sms_code: this.sms_code,
						trade_password: this.password,
						confirm_trade_password: this.confirm_password
					},
					{
						params: {},
						custom: {
							auth: true,
							toast: true,
							catch: true
						}
					}
				)
				.then(res => {
					uni.$u.toast('成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 1200);
				})
				.catch(err => {});
		}
	}
};
</script>

<style lang="scss" scoped>
.zui-form {
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	.zui_input {
		box-sizing: border-box;
		padding: 0 0 0 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		/deep/.u-input__content {
			box-sizing: border-box;
			padding: 0 30rpx;
		}
		/deep/.u-input__content__field-wrapper__field {
			height: 104rpx !important;
		}
	}
}
</style>
